<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播广告</title>
		<style>
			#adv {
				width: 600px;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div id="adv">
			<img id="advImage" src="../1.jpg" width="400" alt=""/>
		</div>
		<script>
			// 1.通过标签获取所有标签的列表，注意：拿到的是列表，所以要拿到特定的标签要输入该标签为列表中的第几个
			//const img = document.getElementsByTagName('img')[0]
			
			// 2.通过父ID获取第一个子标签（这个方法比较好点）
			//const img=document.getElementById('adv').firstChild
			// object text 显示文本标签，文本节点没有src属性，div按enter后被默认为文本，如果不按enter 和div连着就默认为img
			//confirm(img)
			
			// 3.通过父ID获取子标签中的第一个标签
			// const img=document.getElementById('adv').children[0]
			// childen 只能拿到标签
			//confirm(img.src)
			
			// 4.利用样式表选择器查询获取标签
			const img=document.querySelector('#adv>img')
			
			const imageNames = ['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg','6.jpg',]
			var imageIndex = 0
			
			// 重复代码，需封装成一个函数进行调用
			function switchImage() {
				imageIndex += 1
				// 循环，到最后一个下标会重新变成0
				imageIndex %= imageNames.length
				img.src = '../' + imageNames[imageIndex]
			}
			var timerId = setInterval(switchImage,2000)
		
			// 鼠标点进图片里是，清除定时器让图片不再转动
			img.addEventListener('mouseover',() => {clearInterval(timerId)})
			img.addEventListener('mouseout',() => {timerId = setInterval(switchImage,2000)})
		</script>
	</body>
</html>